<template>
    <component :is="component" />
</template>

<script setup>
import { computed } from 'vue';
import Home from '../../pages/Home.vue'
import About from '../../pages/About.vue'
import { useRouter } from './index.js';

const router = useRouter()
console.log(router);
// router-view 动态组件展示依赖于url的变化
// 响应式  router.current  设置为ref
const component = computed(() =>{
    const route = router.routes.find(
    (route) => route.path == router.current.value
    )
    console.log('···');
    return route? route.component:null
})
</script>

<style lang="css" scoped>

</style>